<template>
	<view>
		<view class="flex-c font-24 color-9 mt-25">
			请填写您的店铺信息，我们奖按需尽快安排客服与您联系！
		</view>
		<view class="form">
			<view class="form-item" @click="show=true" style="margin: 0 38rpx;">
				<u--input prefixIcon="grid-fill" suffixIcon="arrow-down" :placeholder="`请选择要收购的平台`" border="0"
					v-model="form.title" readonly prefixIconStyle="color:#dfe2e9"
					suffixIconStyle="color:#dfe2e9"></u--input>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<u--input placeholder="请输入联系人" border="bottom" prefixIcon="phone-fill" v-model="form.nickname"
					prefixIconStyle="color:#dfe2e9" clearable></u--input>
			</view>
			<view class="form-item">
				<u--input placeholder="请输入手机号" border="bottom" prefixIcon="phone-fill" v-model="form.mobile"
					prefixIconStyle="color:#dfe2e9" clearable></u--input>
			</view>
			<view class="form-item">
				<u-input placeholder="请输入验证码" border="0" prefixIcon="lock-fill" prefixIconStyle="color:#dfe2e9"
					clearable v-model="form.code">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-button @tap="getCode" :text="tips" type="info" size="mini"></u-button>
					</template>
				</u-input>
			</view>

		</view>
		<!-- 	<view class="textarea-box">
			<!-- <u-icon name="question-circle-fill" color="#999" size="20"></u-icon> -->
		<!-- <u--textarea placeholder="请输入您想要的内容" maxlength="100" border="0"></u--textarea> -->
		<!-- </view> -->
		<view class="button-box pt-30">
			<u-button shape="circle" color="#e73c15" @click="submit">提交</u-button>
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="onChooseCate"></u-picker>
	</view>
</template>

<script>
	import {
		indexFormPost,
		sendCode
	} from '@/config/api.js'
	export default {
		data() {
			return {
				tips: '获取验证码',
				show: false,
				form: {
					type: 0,
					title: '',
					nickname: '',
					mobile: '',
					code: ''
				},
				columns: [uni.getStorageSync('cateList')]

			};
		},
		methods: {
			// 表单分类选择
			onChooseCate(e) {
				this.form.title = e.value[0]
				this.show = false
			},
			codeChange(text) {
				this.tips = text;
			},
			// 获取验证码
			async getCode() {
				if (!uni.$u.test.mobile(this.form.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确手机号'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await sendCode({
						mobile: this.form.mobile,
						event: 'notice'
					})
					if (res.code == 1) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 表单提交
			async submit() {
				if (!this.form.title) {
					uni.showToast({
						icon: 'none',
						title: '请选择平台'
					})
					return
				}
				if (!this.form.nickname) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人'
					})
					return
				}
				if (!this.form.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
					return
				}
				if (!this.form.code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return
				}
				// const ifPass = await this.onCheckCode()
				// if (ifPass) {
				// 	console.log('通过');
				// }
				uni.showLoading({
					mask: true,
					title: '提交中'
				})
				const res = await indexFormPost({

					...this.form
				})
				uni.hideLoading()
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: '提交成功,请耐心等待工作人员与您联系',
						showCancel: false,
						success: (ret) => {
							for (let k in this.form) {
								this.form[k] = ''
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel: false,
						success: (ret) => {

						}
					});
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f8f9;
	}
</style>
<style lang="scss">
	.form {
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 40rpx 30rpx;

		.form-item {
			margin: 30rpx;
		}
	}

	.button-box {
		margin: 0 200rpx;
	}

	.textarea-box {
		display: flex;
		align-items: start;
		margin: 0 30rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding-left: 50rpx;
		padding-top: 20rpx;
	}
</style>